<template>
  <div class="app-container">
    <el-container>
      <el-aside width="260px" class="sidebar">
        <Sidebar />
      </el-aside>
      <el-container>
        <el-header class="header">
          <el-tabs v-model="activeTab" class="main-tabs" @tab-click="handleTabClick">
            <el-tab-pane label="首页" name="home"></el-tab-pane>
            <el-tab-pane v-for="tab in dynamicTabs" :key="tab.name" :label="tab.label" :name="tab.name"></el-tab-pane>
          </el-tabs>
        </el-header>
        <el-main class="main-content">
          <div v-if="activeTab === 'home'">
            <div class="welcome-title">
              欢迎使用 Tong Utility Suite —— 企业服务总线平台TongESB V7.1.3
            </div>
            <Home @open-excel-tab="openExcelTab" @open-workflow-designer="openWorkflowDesigner" @open-textdoc-tab="openTextDocTab" />
          </div>
          <div v-else-if="activeTab === 'excel'">
            <ExcelForm />
          </div>
          <div v-else-if="activeTab === 'workflow'">
            <WorkflowDesigner />
          </div>
          <div v-else>
            <component :is="getDynamicTabComponent(activeTab)" />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import Sidebar from './Sidebar.vue'
import Home from './Home.vue'
import ExcelForm from './ExcelForm.vue'
import WorkflowDesigner from './WorkflowDesigner.vue'
import emitter from '../event-bus'
import TextDocServiceForm from './TextDocServiceForm.vue'

const activeTab = ref('home')
const dynamicTabs = ref([])

function openExcelTab() {
  if (!dynamicTabs.value.find(t => t.name === 'excel')) {
    dynamicTabs.value.push({ name: 'excel', label: '新建-Excel' })
  }
  activeTab.value = 'excel'
}

function openWorkflowDesigner() {
  if (!dynamicTabs.value.find(t => t.name === 'workflow')) {
    dynamicTabs.value.push({ name: 'workflow', label: '流程集成' })
  }
  activeTab.value = 'workflow'
}

function handleTabClick(tab) {
  activeTab.value = tab.paneName
}

function getDynamicTabComponent(tabName) {
  const tab = dynamicTabs.value.find(t => t.name === tabName)
  return tab ? tab.component : null
}

function openTextDocTab() {
  const tabName = 'textdoc-' + Date.now()
  dynamicTabs.value.push({
    name: tabName,
    label: '新建-文本文档服务',
    component: TextDocServiceForm
  })
  activeTab.value = tabName
}

onMounted(() => {
  emitter.on('open-textdoc-tab', openTextDocTab)
  emitter.on('open-workflow-designer', openWorkflowDesigner)
  emitter.on('close-workflow-designer', () => {
    activeTab.value = 'home'
  })
})
onUnmounted(() => {
  emitter.off('open-textdoc-tab', openTextDocTab)
  emitter.off('open-workflow-designer', openWorkflowDesigner)
  emitter.off('close-workflow-designer')
})
</script>

<style scoped>
.app-container {
  padding-bottom: 100px;
  height: 100vh;
  background: #f5f6fa;
}
.header {
  display: flex;
  align-items: flex-end;
  height: 60px;
  background: #2c3e50;
  color: #fff;
  padding: 0;
  position: relative;
  margin: -8px;
  z-index: 10;
}
.main-tabs {
  background: transparent;
  --el-tabs-header-bg-color: transparent;
  --el-tabs-header-color: #fff;
  padding-left: 8px;
  height: 60px;
  display: flex;
  align-items: flex-end;
  margin-bottom: -22px;
  position: relative;
  z-index: 11;
}
</style> 